<template>
    <div class="white-module module">
      
 
  
      <div class="title"><span></span>赛事信息</div>
      <div class="info">
        <div class="item">
         <div class="o"> <span>参与代表对队</span>山东省潍坊市第一中学</div>
        </div>
        <div class="item">
          <div class="o">  <span>领队</span>王大大</div>
        </div>
        <div class="item">
          <div class="o"> <span>参与赛事</span>第七届全国青少年无人机大赛</div>
        </div>
  
        <div class="item">
          <div class="o">  <span>参赛组别</span>初中组</div>
        </div>
        <div class="item">
          <div class="o">  <span>参赛队伍</span>潍坊一中格斗1队</div>
        </div>
        <div class="item">
          <div class="o">  <span>参赛选手</span>张三、李四</div>
        </div>

        <div class="item">
          <div class="o">  <span>指导老师</span>李琦</div>
        </div>
        <div class="item">
          <div class="o">  <span>当前轮次</span>第二轮</div>
        </div>
        <div class="item">
          <div class="o">  <span>抽签结果</span><div class="btn" @click="dialogVisible=true">开始抽签</div></div>
        </div>
      </div>
  
    </div>
    <el-dialog
    v-model="dialogVisible" custom-class="global-hint-dialog" :show-close="false"
    width="400px"
  >
    <div class="confirm-dialog">
         <div class="text text-draw">您的抽签结果是<strong>2</strong>号！</div>
         <div class="btns">
            <el-button type="primary" @click="dialogVisible=false">确定</el-button>
            
         </div>
    </div>
   
  </el-dialog>
  </template>
  
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
const dialogVisible=ref(true);
const handleEnroll = (index: number) => {
    if (index == 1) {
        router.push("/enroll/individualEnroll");
    } else {
        router.push("/enroll/groupEnroll");
    }

}
</script>
  
<style lang="scss" scoped>
.module {
    padding: 20px 0px 50px;
    margin-bottom: 12px;
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: $font-weight-bold;
        padding: 0px 24px;

        span {
            width: 4px;
            height: 12px;
            background: #00a0e9;
            margin-right: 7px;
        }
    }


    .info {
        margin-bottom: 34px;

        .item {
            display: flex;
            align-items: center;
            margin-top: 8px;

            .o {
                width: 400px;
                display: flex;  align-items: center;
            }

            span {
                width: 85px;
                margin-left: 35px;
                text-align: right;
                margin-right: 20px;  color: #333;

            }
            .btn{
                width: 98px;
                margin-top: 5px;
line-height: 32px;
background: #FFFFFF;
text-align: center;
border-radius: 6px;color: #00A0E9;

border: 1px solid rgba(0,160,233,0.28);
            }
            .btn:hover{
                background: #00A0E9;
                color: #FFFFFF;
                cursor: pointer;
            }
        }
    }



}
</style>
  